//
//  LandmarkDetail.swift
//  WorldLandmark
//
//  Created by liy on 2025/1/23.
//

import SwiftUI

struct LandmarkDetail: View {
  // 界面传值 结构体的默认构造器
  let landmark: Landmark
  // 定义一个可绑定修饰符的变量
  // state两个作用 1.将值类型变成引用类型2.变量变化视图自动更新
	// state一般只用于本文件，所以添加private防止不安全访问
  @State private var zoomed = false

  var body: some View {
    ZStack(alignment: .bottomTrailing) {
      Image(landmark.imageName)
        .resizable()
        .aspectRatio(contentMode: zoomed ? .fill : .fit) // == .scaledToFit()是简便书写方式 // .aspectRatio(contentMode: .fill) ==.scaledToFill()
        .onTapGesture {
          // 添加动画
          // 动画分三种：
          // 1.通用动画 withAnimation
          // 2.单独动画
          // 2.1（.animation:负责或者Image缩放和旋转）
          // 2.2 .transition负责从边缘平移或者过渡的功能
          withAnimation(.easeInOut(duration: 0.5)) {
            zoomed.toggle()
          }
        }

        .navigationTitle(landmark.name)
        // 导航栏标题显示-小标题模式
        .toolbarTitleDisplayMode(.inline)
        // 让图片尺寸充满屏幕 以便介绍文字放到右下角
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)

      if !zoomed {
        // 介绍文字
        Text(landmark.location)
          .font(.largeTitle)
          .foregroundStyle(.secondary)
          .padding()
          // 添加单独动画就覆盖掉通过动画withAniamtion动画了
          .transition(.move(edge: .trailing))
      }
    }
    .edgesIgnoringSafeArea(.horizontal)
  }
}

#Preview {
  Group {
    NavigationView {
      LandmarkDetail(landmark: landmarks[1])
    }
//    NavigationView {
//      LandmarkDetail(landmark: landmarks[3])
//    }
  }
}
